import React from 'react';
import { Alert, Button } from 'antd';

const { ErrorBoundary } = Alert;

class ThrowError extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      errorInfo: ''
    };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    console.log(error, 'errorINfo..................');
    this.setState({ errorInfo: error });
  }

  componentDidCatch(error, errorInfo) {
    console.log(errorInfo, error, 'errorINfo..................');
    this.setState({ errorInfo: error });
  }

  render() {
    const { hasError, errorInfo } = this.state;
    const { children = '' } = this.props;
    const content = hasError ? errorInfo : children;
    return (
      // js错误显示到界面上
      <ErrorBoundary>
        {content}
      </ErrorBoundary>
    );
  }
}

export default ThrowError;
